<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可视区域加载</title>
    <style type="text/css">
        #showDiv{
            width: 500px;
            height: 350px;
            background-color: red;
            margin: 2000px 0 auto 0;
        }
        @-webkit-keyframes fadeInLeft {
            0%{
                opacity: 0;
                -webkit-transform: translate3d(-100%,0,0);
                transform: translate3d(-100%,0,0);
            }
            100%{
                opacity: 1;
                transform: none;
                -ms-transform: none;
                -webkit-transform: none;

            }
        }
        .fadeInLeft{
            animation-name: fadeInLeft;
            -webkit-animation-name: fadeInLeft;
            animation-duration: 2s;
            -webkit-animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div id="showDiv"></div>
    <script type="text/javascript">
        function showDivs() {
            var showId=document.getElementById("showDiv");
            var clients=window.innerHeight||document.documentElement.clientHeight
            var divTop=showId.getBoundingClientRect().top;
            if(divTop<=clients){
                showId.classList.add("fadeInLeft")
            }
        }
       window.onscroll=showDivs;











    </script>
</body>
</html>